<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background-color: #333; color: white; padding: 10px;">
        学生预约课程页面
        <el-button type="success" round style="float: right;" @click="dialogVisible = true">
          退出
        </el-button>
        <el-dialog v-model="dialogVisible" title="退出登录" width="500" :before-close="handleClose">
          <span style="font-size: 20px;">您是否要退出登录？？？</span>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="logout()">
                退出
              </el-button>
            </div>
          </template>
        </el-dialog>

      </el-header>
      <el-container>
        <el-aside>
          <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
            default-active="2" text-color="#fff" @select="toPage">

            <el-menu-item index="/welcome">
              <el-icon><House /></el-icon>
              欢迎首页
            </el-menu-item>

            <el-menu-item index="/choose">
              <el-icon>
                <School />
              </el-icon>
              选课页面
            </el-menu-item>

            <el-menu-item index="/look">
              <el-icon>
                <Memo />
              </el-icon>
              查看信息
            </el-menu-item>

          </el-menu>
        </el-aside>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script setup>
import router from '@/router'
import { ref } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import { ElNotification } from 'element-plus'
import { ElMessageBox } from 'element-plus'
import { useTokenStore } from '@/stores/token.js';//使用store
const tokenStore = useTokenStore();
const dialogVisible = ref(false)

//菜单激活时候实现跳转
function toPage(indexPath) {
  //编程式导航
  router.push(indexPath);
}

//退出
function logout() {
  //删除store中的token
  //sessionStorage.removeItem('token');
  tokenStore.$reset
  //编程式导航
  router.push('/loginStudent');
  ElNotification({
    title: 'Success',
    message: '退出成功~~~',
    type: 'success',
  });
}
</script>

<style scoped>
.common-layout .el-container>.el-container {
  display: flex;
  flex-direction: row;
}

.common-layout .el-aside {
  margin-left: 0 !important;
  order: 1;
  position: sticky;
  right: 0;
}

.common-layout .el-main {
  margin-right: 10px;
}
</style>
